<template>
	<div class="content">
		<canvas
			:style="{ width: '100vw', height: canvasHeight + 'px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
			canvas-id="canvasOne"></canvas>
		<!-- 滑动组件 -->
		<swiper :style="{height: canvasHeight + 'px',marginTop: -canvasHeight + 'px'}" @change="swiperChange">
			<swiper-item v-for="(item, index) in bagList" :key="index">
				<div :style="{ position: 'relative', width: '100vw', height: canvasHeight + 'px' }">
					<img :src="item.posterAddress" :style="{ width: '100%', height: '100%' }" alt="" />
					<div :style="{ position: 'absolute', bottom: '180rpx', left: '90rpx', color: '#000' }">
						<p>{{ userName }}</p>
					</div>
					<img :src="qrImg"
						:style="{ position: 'absolute', bottom: '100rpx', right: '60rpx', width: '160rpx', height: '160rpx' }"
						alt="" />
				</div>
			</swiper-item>
		</swiper>
		<view class='submit-button' @click='savePosterPath'>保存海报</view>
	</div>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		getQrCode,
		getQrCodeBag
	} from '@/api/extension.js';

	export default {
		data() {
			return {
				userName: '',
				bagList: [],
				qrImg: '',
				screenWidth: uni.getSystemInfoSync().screenWidth,
				currentBackgroundIndex: 0, // 当前选中的背景图索引
			};
		},
		computed: {
			canvasHeight() {
				return this.screenWidth * (690 / 400);
			}
		},
		onShow() {
			this.initData();
		},
		methods: {
			initData() {
				getQrCode().then(res => {
					this.qrImg = res.data;
				});
				getUserInfo().then(res => {
					this.userName = res.data.nickName;
				});
				const params = {
					pageSize: 99,
					pageNumber: 1,
				};
				getQrCodeBag(params).then(res => {
					this.bagList = res.data.records;
				});
			},
			swiperChange(e) {
				const currentIndex = e.detail.current;
				this.currentBackgroundIndex = currentIndex;
			},
			showTips(title, icon = 'none') {
				uni.showToast({
					title: title,
					icon: icon
				});
			},
			savePosterPath() {
				console.log(this.bagList.length, this.qrImg, this.userName)
				if (!this.bagList.length || !this.qrImg || !this.userName) {
					this.showTips('请等待数据加载完成', 'none');
					return;
				}
				const currentBackground = this.bagList[this.currentBackgroundIndex].posterAddress;
				//选中图片后，点击保存画布合成
				this.mergeImages(currentBackground);
			},
			mergeImages(currentBackground) {
				let context = uni.createCanvasContext('canvasOne');
				context.clearRect(0, 0, this.screenWidth, this.canvasHeight); // 清除画布
				// 绘制背景图
				uni.downloadFile({
					url: currentBackground,
					success: (downloadRes) => {
						if (downloadRes.statusCode === 200) {
							const backgroundTempFilePath = downloadRes.tempFilePath;
							context.drawImage(backgroundTempFilePath, 0, 0, this.screenWidth, this
								.canvasHeight);
							// 绘制二维码
							uni.downloadFile({
								url: this.qrImg,
								success: (qrDownloadRes) => {
									if (qrDownloadRes.statusCode === 200) {
										const qrTempFilePath = qrDownloadRes.tempFilePath;
										// 计算二维码的位置和大小
										const qrX = this.screenWidth - 120;
										const qrY = this.canvasHeight - 140;
										context.drawImage(qrTempFilePath, qrX, qrY, 80, 80);
										// 绘制文字
										context.setFontSize(16);
										// 计算文字位置
										const nameY = this.canvasHeight - 100;
										context.fillText(this.userName, (this.screenWidth - 300) / 2, nameY);
										// 将画布内容导出为图片
										context.draw(true, () => {
											uni.canvasToTempFilePath({
												destWidth: this.screenWidth,
												destHeight: this.canvasHeight,
												canvasId: 'canvasOne',
												fileType: 'jpg',
												success: (res) => {
													uni.downloadFile({
														url: currentBackground,
														success: (
															downloadRes
														) => {
															if (downloadRes.statusCode ===200) {
															  const tempFilePath =res.tempFilePath;
															  const link = document.createElement('a');
															  link.href = tempFilePath;
															  link.download = 'poster.jpg'; // 设置下载的文件名
															
															  // 模拟点击链接以触发下载
															  document.body.appendChild(link);
															  link.click();
															  document.body.removeChild(link);
															
															  this.showTips('正在保存图片', 'success');
															}
														}
													})
												}
											})
										})
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss';

	.content {
		min-height: 100vh;
		background-color: #F3F3F3;
	}

	.submit-button {
		width: 200px;
		height: 40px;
		line-height: 40px;
		background: $uni-color-orange;
		border-radius: 40px;
		font-size: 22px;
		color: $uni-color-fff;
		text-align: center;
		margin: 20px auto;
	}
</style>